<template>
	<view>
	<!-- 分类 -->
		<ugo-search></ugo-search>
	<view class="category">
		<!-- 顶级分类 -->
		<view class="sup">
			<scroll-view scroll-y>
				<text
					v-for="(item) in cateList"
					:key="cat_id"
				>{{item.cat_name}}</text>
			</scroll-view>
		</view>
		<!-- 子级分类 -->
		<view class="sub">
			<scroll-view scroll-y>
				<!-- 封面图 -->
				<image src="http://static.botue.com/ugo/uploads/category.png" class="thumb" />
				<view class="children" :key="item.cat_id" v-for="item in 10">
					<view class="title">{{'品类'+item}}</view>
					<!-- 品牌 -->
					<view class="brands">
						<navigator
							:url="'/packone/list/index?query='+it.cat_name"
							v-for="it in 10"
						>
							<image  src="https://api-hmugo-web.itheima.net/full/fd85e32427cfb12e312e4a1022898b3aa3321822.jpg" />
							<text>it.cat_name</text>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList: []
			}
		},
		onLoad() {
			this.getCateList()
		},
		methods: {
			// 获取分类列表数据
			async getCateList() {
				const {message} = await this.request({url: '/categories'})
				this.cateList = message
			}
		}
	}
</script>


<style scoped lang="scss">
	scroll-view {
		height: 100%;
	}
	.category {
		display: flex;
		width: 100%;
		position: absolute;
		top: 100rpx;
		bottom: 0;

		.sup {
			width: 196rpx;
			background-color: #f4f4f4;

			text {
				display: block;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 27rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				&.active {
					background-color: #fff;
					color: #ea4451;
					position: relative;

					&::before {
						content: "";
						display: block;
						width: 8rpx;
						height: 60rpx;
						transform: translateY(-50%);
						background-color: #ea4451;

						position: absolute;
						left: 0;
						top: 50%;
					}
				}
			}
		}

		.sub {
			flex: 1;
			padding: 20rpx 18rpx;

			.thumb {
				width: 100%;
				height: 180rpx;
			}

			.children {
				text-align: center;
				color: #333;

				.title {
					display: inline-block;
					margin: 40rpx 0 20rpx;
					font-size: 30rpx;

					&::before {
						content: "/";
						margin-right: 20rpx;
						color: #666;
					}

					&::after {
						content: "/";
						margin-left: 20rpx;
						color: #666;
					}
				}
			}

			.brands {
				display: flex;
				flex-wrap: wrap;

				navigator {
					width: 33%;
					margin-bottom: 20rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
